<template>
	<div class="data-count">
    <cover-view class="list-rec">
      <cover-view v-for="(item, index) in tabArr" :key="index" @click="changeIndex(index)" :class="{'active': index == recIndex}" class="list-rec-item">
        <cover-view>{{item}}</cover-view>
        <cover-view class="active-border"></cover-view>
      </cover-view>
    </cover-view>
    <div class="coach-data" v-if="recIndex === 0">
      <uni-datetime-picker v-model="dataDate" :border="false" type="daterange" @change="changeDate"/>
      <div class="item-wrap">
        <div class="coach-item">
          <p><i class="dicon dicon-1"></i></p>
          <p>服务会员</p>
          <p><span>{{ countMine.memberUserCount }}</span>人</p>
        </div>
        <div class="coach-item">
          <p><i class="dicon dicon-2"></i></p>
          <p>耗课</p>
          <p><span>{{ countMine.usedSignCourseCount }}</span>节</p>
          <span class="view-detail" @click="goDetail1">查看明细<i class="dicon-6"></i></span>
        </div>
        <div class="coach-item">
          <p><i class="dicon dicon-3"></i></p>
          <p>业绩</p>
          <p><span>{{ (countMine.signMoney/100).toFixed(2) }}</span>元</p>
        </div>
        <div class="coach-item">
          <p><i class="dicon dicon-4"></i></p>
          <p>耗课金额</p>
          <p><span>{{ (countMine.usedSignCourseMoney/100).toFixed(2) }}</span>元</p>
        </div>
      </div>
    </div>
    <div class="store-data" v-if="recIndex === 1">
      <div class="top-data" v-if="userInfo.roleCode == 'ADMIN'">
        <h2>门店数据</h2>
        <p><span>用户总数</span><em>{{ headStatistics.userCount }}</em><span>会员总数</span><em>{{ headStatistics.memberCount }}</em></p>
      </div>
      <div class="bottom-data" v-if="userInfo.roleCode == 'ADMIN'">
        <div class="bottom-top">
          <div class="bt-left bt-item">
            <p>会员人均消费</p>
            <h3>{{ (headStatistics.averagePayMoney/100).toFixed(2) }}<em>元</em></h3>
          </div>
          <div class="bt-right bt-item">
            <p>总营收金额</p>
            <h3>{{ (headStatistics.sumPayMoney/100).toFixed(2) }}<em>元</em></h3>
          </div>
        </div>
        <div class="average">
          <p><i class="dicon-7"></i>未完成金额：<span>{{ (headStatistics.sumUnPayMoney/100).toFixed(2) }}</span>元</p>
        </div>
      </div>
      <div class="store-info">
        <div class="top-wrap">
          <picker mode="selector" @change="changeStore" :value="shopIndex" :range="shopArr" range-key="storeName" :disabled="JSON.parse(role)[0] != 'ADMIN'">
            <span class="store-select">{{shopArr[shopIndex].storeName}}</span>
          </picker>
          <div class="pick-date-wrap">
            <picker mode="date" :value="startDate" @change="changeStart" class="pick-date">
              <view class="uni-input">{{startDate}}</view>
            </picker>
            <span>-</span>
            <picker mode="date" :value="endDate" @change="changeEnd" class="pick-date">
              <view class="uni-input">{{endDate}}</view>
            </picker>
          </div>
        </div>
        <ul class="list-count">
          <li :class="{'active': activeTabIndex === index}" v-for="(item, index) in countTab" :key="index" @click="changeTabIndex(index)">{{ item }}</li>
        </ul>
        <p class="total-data" v-if="activeTabIndex === 0">
          耗课总数：<span>{{courseUsed.used}}</span>节
          <span class="for-per"><i></i>按次</span>
          <span class="for-time"><i></i>包时</span>
          <em class="view-detail1" @click="goDetail2">查看明细<i class="dicon-6"></i></em>
        </p>
        <div class="chart-wrap" v-if="activeTabIndex === 0">
          <my-echarts id="main" ref="mapChart" :onInit="initChart" canvasId="main"/>
        </div>
        <p class="total-data" v-if="activeTabIndex === 1">
          业绩总金额：<span>{{ (coachMoney/100).toFixed(2) }}</span>元
        </p>
        <div class="chart-wrap" v-if="activeTabIndex === 1">
          <my-echarts id="main1" ref="mapChart1" :onInit="initChart1" canvasId="main1"/>
        </div>
        <p class="total-data course-total" v-if="activeTabIndex === 2">
          耗课总金额：<span>{{(courseUsed.usedMoney/100).toFixed(2)}}</span>元
          <span class="for-per"><i></i>按次</span>
          <span class="for-time"><i></i>包时</span>
        </p>
        <div class="chart-wrap" v-if="activeTabIndex === 2">
          <my-echarts id="main2" ref="mapChart2" :onInit="initChart2" canvasId="main2"/>
        </div>
      </div>
      <div class="order-info">
        <ul class="list-person">
          <li>
            <p>订单数</p>
            <p><span>{{ totalCount }}</span>单</p>
          </li>
          <li>
            <p>订单金额</p>
            <p><span>{{ totalMoney }}</span>元</p>
          </li>
        </ul>
        <h4 @click="updateData">课程类型订单金额比例</h4>
        <div class="chart-wrap1">
          <my-echarts id="main3" ref="mapChart3" :onInit="initChart3" canvasId="main3"/>
        </div>
      </div>
    </div>
    <navbar title="数据"></navbar>
    <bottom :activePageIndex="2"></bottom>	
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import { 
    storeGet, 
    signCourseTypeAndMoneyStatistic, 
    statisticGroupByCoachUserIdAndSaleMode, 
    coachSignStatistic,
    coachSignCourseUsedStatistic,
    signCourseUsedStatistic,
    userStatistic,
    statisticMy
  } from '@/api/manageApi'
  import {getStore} from '@/util/service'
  import bottom from '@/components/bottom/bottom'
  import navbar from '@/components/navbar/navbar'
  import dayjs from 'dayjs'
  import * as echarts from '../util/echarts.min'
  import myEcharts from "../components/mpvue-echarts/src/echarts.vue"
  let chart = null
  let chart1 = null
  let chart2 = null
  let chart3 = null
	export default {
		data() {
			return {
        tabArr: ['我的数据', '门店数据'],
        countTab: ['教练耗课数', '教练业绩金额', '教练耗课金额'],
        recIndex: 0,
        dataDate: [],
        scrollLeft: 0,
        shopArr: [{storeName: '', id: ''}],
        shopIndex: 0,
        storeId: '',
        activeTabIndex: 0,
        startDate: '',
        endDate: '',
        totalCount: 0,
        totalMoney: 0,
        courseUsed: {
          used: 0,
          usedMoney: 0,
          money: 0
        },
        headStatistics: {
          user_count: 0,
          risk_count: 0,
          hidden_count: 0,
          meeting_count: 0,
          effective_count: 0,
          expire_count: 0
        },
        countMine: {},
        coachMoney: 0
			}
    },
    computed:{
			...mapGetters(['userInfo', 'uniToken', 'role']),
      // startDate() {
      //   return this.getDate('start');
      // },
      // endDate() {
      //   return this.getDate('end');
      // }
		},
		onLoad () {
      this.dataDate = [dayjs().subtract(1, 'month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
      this.startDate = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
      this.endDate = dayjs().format('YYYY-MM-DD')
      this.getShops()
      if(this.userInfo.roleCode == 'ADMIN'){
        this.getUserStatistic()
      }
      if(this.userInfo.roleCode == 'COACH'){
        this.tabArr =  ['我的数据']
      }
      this.getStatisticMy(this.dataDate[0], this.dataDate[1])
    },
    components: {
      bottom,
      navbar,
      myEcharts
    },
		methods: {
      // 会员统计
      getUserStatistic () {
        var params = {}
        userStatistic(params).then(res => {
          var data = res.data
          // console.log(data)
          this.headStatistics = data
        })
      },
      // 我的统计数据
      getStatisticMy (start, end) {
        var params = {
          start: start,
          end: end
        }
        statisticMy(params).then(res => {
          var data = res.data
          this.countMine = data
        })
      },
      goDetail1 () {
        var url = '/pagesA/data/consumeDetail?start=' + this.dataDate[0] + '&end=' + this.dataDate[1]
        this.goUrl(url)
      },
      goDetail2 () {
        var url = '/pagesA/data/consumeClass?start=' + this.startDate + '&end=' + this.endDate + '&storeId=' + this.storeId + '&type=2'
        this.goUrl(url)
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === 'start') {
            year = year - 60;
        } else if (type === 'end') {
            year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      changeStart (e) {
        // console.log(e)
        this.startDate = e.detail.value
        if (this.startDate && this.endDate) {
          setTimeout(() => {
            this.getSignCourseTypeAndMoneyStatistic(this.startDate, this.endDate, this.storeId)
          }, 100)
          this.getTabData()
        }
      },
      changeEnd (e) {
        this.endDate = e.detail.value
        if (this.startDate && this.endDate) {
          setTimeout(() => {
            this.getSignCourseTypeAndMoneyStatistic(this.startDate, this.endDate, this.storeId)
          }, 100)
          this.getTabData()
        }
      },
      // 获取店铺
      getShops () {
        storeGet('').then(res => {
          // console.log(res)
          if (res.code == '200') {
            var data = res.data
            this.shopArr = data
            if (JSON.parse(this.role)[0] == 'ADMIN') {
              this.shopArr = [{storeName: '全部', id: ''}].concat(this.shopArr)
              this.shopIndex = 0
              this.storeId = ''
              // if (getStore('coachStoreId')) {
              //   this.shopArr.forEach((item, index) => {
              //     if(item.id == getStore('coachStoreId')){
              //       this.shopIndex = index
              //       this.storeId = item.id
              //     }
              //   })
              // } else {
              //   this.shopArr.forEach((item, index) => {
              //     if(item.flagship === 1){
              //       this.shopIndex = index
              //       this.storeId = item.id
              //     }
              //   })
              // }
            } else {
              this.shopArr.forEach((item, index) => {
                if(item.id == this.userInfo.storeId){
                  this.shopIndex = index
                  this.storeId = item.id
                }
              })
            }
          }
        })
      },
      changeDate (val) {
        // console.log(val)
        if(val.length === 2){
          this.getStatisticMy(val[0], val[1])
        }
      },
      changeTabIndex (index) {
        this.activeTabIndex = index
        this.getTabData()
      },
      getTabData () {
        setTimeout(() => {
          if(this.activeTabIndex === 0){
            this.getStatisticGroupByCoachUserIdAndSaleMode(this.startDate, this.endDate, this.storeId)
          }
          if(this.activeTabIndex === 1){
            this.getCoachSignStatistic(this.startDate, this.endDate, this.storeId)
          }
          if(this.activeTabIndex === 2){
            this.getCoachSignCourseUsedStatistic(this.startDate, this.endDate, this.storeId)
          }
        }, 100)
        this.getUserSignCourseUsedStatistic(this.startDate, this.endDate, this.storeId)
      },
      changeIndex (index) {
        this.recIndex = index
        if(this.recIndex === 1){
          setTimeout(() => {
            this.getSignCourseTypeAndMoneyStatistic(this.startDate, this.endDate, this.storeId)
          }, 100)
          this.getTabData()
        }
      },
      changeStore (e) {
        this.shopIndex = e.detail.value
        this.storeId = this.shopArr[this.shopIndex].id
        // console.log(this.shopIndex, this.storeId)
        if (this.startDate && this.endDate) {
          setTimeout(() => {
            this.getSignCourseTypeAndMoneyStatistic(this.startDate, this.endDate, this.storeId)
          }, 100)
          this.getTabData()
        }
      },
      initChart(canvas, width, height) {
        const winWidth = uni.getSystemInfoSync().windowWidth
        width = winWidth*0.85
        height = 250
        chart = echarts.init(canvas, null, {
          width: width,
          height: height,
        });
        canvas.setChart(chart);
        let option = {
          // legend: {
          //   top: '5%',
          //   left: 'center'
          // },
          grid: {
            left: '0%',
            right: '5%',
            bottom: '3%',
            top: '0%',
            containLabel: true
          },
          color: ['#ff5d3d', '#ffbf40'],
          xAxis: {
            type: 'value',
            splitNumber: 3
            // boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: [],
            splitNumber: 3,
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          series: [
            {
              name: '教练耗课数按次',
              type: 'bar',
              stack: 'total',
              data: [],
              barWidth: 8,
              label: {
                show: true,
                fontSize: 9,
                color: '#000',
                textBorderWidth: 0
              },
              itemStyle:{
                // barBorderRadius: 5
              }
            },
            {
              name: '教练耗课数包时',
              type: 'bar',
              stack: 'total',
              data: [],
              barWidth: 8,
              label: {
                show: true,
                fontSize: 9,
                color: '#000',
                textBorderWidth: 0
              },
              itemStyle:{
                barBorderRadius: [0, 5, 5, 0]
              }
            }
          ]
        }
        chart.setOption(option);
        return chart; // 返回 chart 后可以自动绑定触摸操作
      },
      initChart1(canvas, width, height) {
        const winWidth = uni.getSystemInfoSync().windowWidth
        width = winWidth*0.85
        height = 250
        chart1 = echarts.init(canvas, null, {
          width: width,
          height: height,
        });
        // console.log(width)
        // console.log(height)
        canvas.setChart(chart1);
        let option = {
          // legend: {
          //   top: '5%',
          //   left: 'center'
          // },
          grid: {
            left: '0%',
            right: '5%',
            bottom: '3%',
            top: '0%',
            containLabel: true
          },
          color: ['#ff5d3d', '#ffbf40'],
          xAxis: {
            type: 'value',
            splitNumber: 3
            // boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: [],
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          series: [
            {
              name: '教练业绩金额',
              type: 'bar',
              data: [],
              barWidth: 5,
              label: {
                show: true,
                position: 'right',
                textBorderWidth: 0,
                color: '#000',
                fontSize: 9
              }
            }
          ]
        }
        chart1.setOption(option);
        return chart1; // 返回 chart 后可以自动绑定触摸操作
      },
      initChart2(canvas, width, height) {
        const winWidth = uni.getSystemInfoSync().windowWidth
        width = winWidth*0.85
        height = 250
        chart2= echarts.init(canvas, null, {
          width: width,
          height: height,
        });
        canvas.setChart(chart2);
        let option = {
          // legend: {
          //   top: '5%',
          //   left: 'center'
          // },
          grid: {
            left: '0%',
            right: '5%',
            bottom: '3%',
            top: '0%',
            containLabel: true
          },
          color: ['#ff5d3d', '#ffbf40'],
          xAxis: {
            type: 'value',
            splitNumber: 3
            // boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: [],
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          series: [
            {
              name: '教练耗课金额按次',
              type: 'bar',
              data: [],
              barWidth: 5,
              stack: 'perTime',
              label: {
                show: true,
                textBorderWidth: 0,
                color: '#000',
                fontSize: 9
              }
            },
            {
              name: '教练耗课金额包时',
              type: 'bar',
              data: [],
              barWidth: 5,
              stack: 'perTime',
              label: {
                show: true,
                textBorderWidth: 0,
                color: '#000',
                fontSize: 9,
                position: 'right'
              }
            }
          ]
        }
        chart2.setOption(option);
        return chart2; // 返回 chart 后可以自动绑定触摸操作
      },
      initChart3(canvas, width, height) {
        chart3 = echarts.init(canvas, null, {
          width: width,
          height: height,
        });
        canvas.setChart(chart3);
        let option = {
          color: ['#ff5d3d', '#ffbf40'],
          series: [
            {
              name: '课程订单',
              type: 'pie',
              selectedOffset: 0,
              selectedMode: 'single',
              avoidLabelOverlap: true,
              silent: false,
              radius: ['40%', '70%'],
              center: ['50%', '58%'],
              label: {
                show: true,
                position: 'outside',
                formatter: '{b}\n\n{d}%'
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     fontSize: 12
              //   }
              // },
              labelLine: {
                show: true
              },
              data: [
                { value: 0, name: '私教' },
                { value: 0, name: '自由练' }
              ]
            }
          ]
        }
        chart3.setOption(option);
        return chart3; // 返回 chart 后可以自动绑定触摸操作
      },
      updateData () {
        chart3.setOption({
          series:[{
            data:[
              { value: 600, name: '私教' },
              { value: 300, name: '自由练' }
            ]
          }]
        })
      },

      // 订单类型统计
      getSignCourseTypeAndMoneyStatistic (start, end, storeId) {
        var params = {
          'end': end ? end + '' : '',
          'start': start ? start + '' : '',
          'storeId': storeId
        }
        signCourseTypeAndMoneyStatistic(params).then(res => {
          var data = res.data 
          // console.log(data)
          if (data && data.length > 0) {
            this.totalCount = parseInt(data[0].count) + (data[1] ? parseInt(data[1].count) : 0)
            this.totalMoney = ((parseInt(data[0].sumMoney) + (data[1] ? parseInt(data[1].sumMoney) : 0)) / 100).toFixed(2)
            var yData1 = [
              { value: ((parseInt(data[0].sumMoney)) / 100).toFixed(2), name: data[0].courseType === 1 ? '私教课' : '自由练' },
              { value: ((data[1]? parseInt(data[1].sumMoney):0) / 100).toFixed(2), name: data[0].courseType === 1 ? '自由练' : '私教课'}
            ]
            chart3.setOption({
              series:[{
                data: yData1
              }]
            })
          } else {
            this.totalCount = 0
            this.totalMoney = '0.00'
            chart3.setOption({
              series:[{
                data: []
              }]
            })
          }
        })
      },
      // 教练耗课数
      getStatisticGroupByCoachUserIdAndSaleMode (start, end, storeId) {
        var params = {
          'end': end ? end + '' : '',
          'start': start ? start + '' : '',
          'storeId': storeId
        }
        statisticGroupByCoachUserIdAndSaleMode(params).then(res => {
          var data = res.data 
          // console.log(data)
          if (data && data.length > 0) {
            var yData = []
            var xData1 = []
            var xData2 = []
            data.forEach((item, index) => {
              yData.push(item.userName)
              xData1.push(parseInt(item.secondCount))
              xData2.push(parseInt(item.timesCount))
            })
            chart.setOption({
              yAxis: {
                data: yData
              },
              series:[
                {data: xData1},
                {data: xData2}  
              ]
            })
          } else {
            chart.setOption({
              yAxis: {
                data: []
              },
              series:[
                {data: []},
                {data: []}  
              ]
            })
          }
        })
      },
      // 教练业绩金额
      getCoachSignStatistic (start, end, storeId) {
        var params = {
          'end': end ? end + '' : '',
          'start': start ? start + '' : '',
          'storeId': storeId
        }
        coachSignStatistic(params).then(res => {
          var data = res.data 
          console.log(data)
          var money = 0
          if (data && data.length > 0) {
            var xData = []
            var yData = []
            data.forEach((item, index) => {
              xData.push((parseInt(item.money) / 100).toFixed(2))
              yData.push(item.userName)
              money += item.money
            })
            chart1.setOption({
              yAxis: {
                data: yData
              },
              series:[
                {data: xData}
              ]
            })
          } else {
            chart1.setOption({
              yAxis: {
                data: []
              },
              series:[
                {data: []}
              ]
            })
          }
          this.coachMoney = money
        })
      },
      // 教练耗课金额
      getCoachSignCourseUsedStatistic (start, end, storeId) {
        var params = {
          'end': end ? end + '' : '',
          'start': start ? start + '' : '',
          'storeId': storeId
        }
        coachSignCourseUsedStatistic(params).then(res => {
          if (res.code == 200 && res.data) {
            var data = res.data 
            // console.log(data)
            var yData = []
            var xData1 = []
            var xData2 = []
            data.forEach((item, index) => {
              yData.push(item.userName)
              xData1.push((parseInt(item.secondMoney) / 100).toFixed(2))
              xData2.push((parseInt(item.timesMoney) / 100).toFixed(2))
            })
            chart2.setOption({
              yAxis: {
                data: yData
              },
              series:[
                {data: xData1},
                {data: xData2}
              ]
            })
          }
        })
      },
      // 私教课程消耗统计
      getUserSignCourseUsedStatistic (start, end, storeId) {
        var params = {
          'end': end ? end + '' : '',
          'start': start ? start + '' : '',
          'storeId': storeId
        }
        signCourseUsedStatistic(params).then(res => {
          // console.log(res)
          var data = res.data ? res.data : {
            used: 0,
            usedMoney: 0,
            money: 0
          }
          // console.log(data)
          this.courseUsed = data
        })
      }
		}
	}
</script>

<style lang="scss">
.data-count{
  padding-top: 270rpx;
  // padding-bottom: 50rpx;
  .uni-calendar--fixed {
    bottom: 104rpx;
  }
  .chart-wrap{
    width: 100%;
    height: 250px;
  }
  .chart-wrap1{
    width: 100%;
    height: 165px;
  }
  .list-rec{
    width: 100%;
    height: 96rpx;
    background: #fff;
    position: fixed;
    left: 0;
    top: 164rpx;
    z-index: 100;
    .list-rec-item{
      display: inline-block;
      width: 50%;
      text-align: center;
      line-height: 96rpx;
      position: relative;
    }
    .list-rec-item:first-child::before{
      // content: '';
      // width: 1rpx;
      // height: 30rpx;
      // background: #DCDCDC;
      // position: absolute;
      // right: 0;
      // top: 33rpx;
    }
    .active{
      font-weight: bold;
      color: #FF5A20;
    }
    .active-border{
      position: absolute;
      width: 38rpx;
      height: 8rpx;
      background: #fff;
      border-radius: 4rpx;
      position: absolute;
      left: 50%;
      margin-left: -19rpx;
      bottom: 0;
    }
    .active .active-border{
      background: #FF5A20;
    }
  }
  .coach-data{
    padding: 20rpx 24rpx;
    .uni-date{
      width: 70%;
    }
    .item-wrap{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30rpx;
    }
    .coach-item{
      width: 338rpx;
      height: 232rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding: 35rpx 32rpx;
      box-sizing: border-box;
      margin-bottom: 26rpx;
      position: relative;
      p{
        font-size: 26rpx;
        color: #575757;
        margin-bottom: 18rpx;
        span{
          font-weight: 500;
          font-size: 40rpx;
          color: #000000;
        }
      }
      .view-detail{
        position: absolute;
        right: 30rpx;
        top: 35rpx;
        font-size: 24rpx;
        color: #F6A51F;
      }
    }
  }
  .dicon{
    width: 40rpx;
    height: 40rpx;
    display: inline-block;
    margin-bottom: 5rpx;
  }
  .dicon-1{
    background: url('../../static/d1.png') no-repeat 0 0;
    background-size: cover;
  }
  .dicon-2{
    background: url('../../static/d2.png') no-repeat 0 0;
    background-size: cover;
  }
  .dicon-3{
    background: url('../../static/d3.png') no-repeat 0 0;
    background-size: cover;
  }
  .dicon-4{
    background: url('../../static/d4.png') no-repeat 0 0;
    background-size: cover;
  }
  .dicon-5{
    width: 42rpx;
    height: 42rpx;
    background: url('../../static/d4.png') no-repeat 0 0;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin: 0 14rpx 0 21rpx;
  }
  .dicon-6{
    width: 10rpx;
    height: 18rpx;
    background: url('../static/d10.png') no-repeat 0 0;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin-left: 12rpx;
  }
  .dicon-7{
    width: 42rpx;
    height: 42rpx;
    background: url('../static/d8.png') no-repeat 0 0;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15rpx;
    margin-left: 17rpx;
  }
  .store-data{
    width: 702rpx;
    margin: 24rpx auto;
    .top-data{
      width: 100%;
      height: 232rpx;
      background: url('../static/d11.png') no-repeat 0 0;
      background-size: cover;
      padding-top: 30rpx;
      box-sizing: border-box;
      p{
        display: flex;
        align-content: center;
        line-height: 68rpx;
      }
      h2{
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        margin: 0rpx 0 26rpx;
        text-indent: 34rpx;
      }
      span{
        margin-left: 115rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #FED8CE;
      }
      em{
        margin-left: 12rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
      }
    }

    .bottom-data{
      width: 100%;
      // height: 248rpx;
      background: linear-gradient(0deg, #FFFFFF 60%, #FFDFC8 100%);
      margin-top: -36rpx;
      margin-bottom: 24rpx;
      border-radius: 15rpx;
      padding: 39rpx 28rpx 33rpx;
      box-sizing: border-box;
      .bottom-top{
        display: flex;
        .bt-left{
          margin-left: 12rpx;
          margin-right: 130rpx;
          min-width: 180rpx;
        }
        .bt-item{
          p{
            font-weight: 400;
            font-size: 24rpx;
            color: #1E1E1E;
            margin-bottom: 14rpx;
          }
          h3{
            font-weight: 500;
            font-size: 36rpx;
            color: #000000;
            margin-bottom: 32rpx;
            display: flex;
            em{
              font-weight: 400;
              font-size: 24rpx;
              color: #575757;
              margin-left: 6rpx;
              margin-top: 10rpx;
            }
          }
        }
      }
      .average{
        width: 646rpx;
        height: 76rpx;
        line-height: 76rpx;
        background: linear-gradient(90deg, #F4F4F4 0%, rgba(244,244,244,0.5) 100%);
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #575757;
        span{
          font-weight: 500;
          font-size: 32rpx;
          color: #000000;
          vertical-align: middle;
          display: inline-block;
          margin-top: -6rpx;
          margin: -6rpx 2rpx 0;
        }
      }
    }

    .total-info, .order-info{
      background: linear-gradient(0deg, #FFFFFF, #FFDFC8);
      width: 702rpx;
      height: 506rpx;
      padding: 32rpx 28rpx;
      border-radius: 20rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx;
      .list-person{
        width: 646rpx;
        height: 144rpx;
        background: rgba(255,255,255,0.5);
        box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(60,102,198,0.07);
        border-radius: 10rpx;
        padding-top: 30rpx;
        box-sizing: border-box;
        margin-bottom: 28rpx;
        li{
          width: 50%;
          display: inline-block;
          font-size: 24rpx;
          color: #575757;
          text-align: center;
          position: relative;
          p{
            margin-bottom: 14rpx;
          }
          span{
            font-weight: 500;
            font-size: 36rpx;
            color: #000000;
          }
        }
        li:first-child::after{
          content: '';
          width: 1rpx;
          height: 72rpx;
          background: #E6E8EC;
          position: absolute;
          right: 0;
          top: 6rpx;
        }
      }
      .scroll-view{
        margin-bottom: 28rpx;
        .list-shop{
          display: flex;
          flex-wrap: nowrap;
          // justify-content: space-between;
          li{
            width: 200rpx;
            height: 160rpx;
            background: #F7F7F7;
            border-radius: 10rpx;
            padding: 28rpx 24rpx;
            box-sizing: border-box;
            font-size: 24rpx;
            color: #575757;
            line-height: 32rpx;
            text-align: center;
            margin: 0 19rpx;
            flex-shrink: 0;
            p{
              margin-bottom: 10rpx;
            }
            span{
              font-weight: 500;
              font-size: 36rpx;
              color: #000000;
            }
          }
        }
      }
    }
    .store-info{
      width: 702rpx;
      // height: 700rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      margin-bottom: 24rpx;
      padding: 40rpx 28rpx;
      box-sizing: border-box;
      position: relative;
      .top-wrap{
        display: flex;
        align-items: center;
      }
      .uni-date-x--border, .uni-date-x{
        border-radius: 100px !important;
      }
      .uni-date-x{
        height: 30px;
      }
      .uni-date__x-input{
        font-size: 12px;
      }
      .store-select{
        width: 201rpx;
        height: 60rpx;
        background: #FFFFFF;
        border-radius: 28rpx;
        border: 1px solid #EBEBEB;
        display: inline-block;
        padding: 0 20rpx;
        box-sizing: border-box;
        line-height: 60rpx;
        position: relative;
        margin-right: 60rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .store-select::after{
        content: '';
        width: 18rpx;
        height: 20rpx;
        background: url('../../static/d7.png') no-repeat 0 0;
        background-size: contain;
        display: inline-block;
        position: absolute;
        right: 20rpx;
        top: 18rpx;
      }
      .pick-date-wrap{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56rpx;
        line-height: 56rpx;
        border: 1px solid #ddd;
        border-radius: 30rpx;
        width: 400rpx;
        padding: 0 26rpx;
        margin-top: -6rpx;
        .pick-date{
          font-size: 24rpx;
        }
      }
      .store-date{
        width: 418rpx;
        height: 56rpx;
        background: #FFFFFF;
        position: absolute;
        right: 28rpx;
        top: 40rpx;
        text-align: center;
      }
      .list-count{
        margin-top: 40rpx;
        width: 642rpx;
        height: 56rpx;
        background: #F9F9F9;
        border-radius: 28rpx;
        li{
          width: 214rpx;
          height: 56rpx;
          border-radius: 28rpx;
          font-size: 26rpx;
          color: #575757;
          display: inline-block;
          line-height: 56rpx;
          text-align: center;
        }
        .active{
          width: 214rpx;
          height: 56rpx;
          background: #FF5D3D;
          border-radius: 28rpx;
          font-size: 28rpx;
          color: #FFFFFF;
        }
      }
      .total-data{
        margin: 45rpx 0;
        font-size: 28rpx;
        color: #575757;
        position: relative;
        span{
          font-size: 32rpx;
          color: #000000;
        }
        .view-detail1{
          position: absolute;
          right: 0rpx;
          top: 2rpx;
          font-size: 24rpx;
          color: #F6A51F;
        }
        .for-per{
          position: absolute;
          right: 260rpx;
          top: 10rpx;
          font-size: 20rpx;
          color: #ff5d3d;
          i{
            width: 30rpx;
            height: 20rpx;
            display: inline-block;
            vertical-align: middle;
            background: #ff5d3d;
            margin-right: 5rpx;
          }
        }
        .for-time{
          position: absolute;
          right: 160rpx;
          top: 10rpx;
          font-size: 20rpx;
          color: #ffbf40;
          i{
            width: 30rpx;
            height: 20rpx;
            display: inline-block;
            vertical-align: middle;
            background: #ffbf40;
            margin-right: 5rpx;
          }
        }
      }
      .course-total{
        .for-per{
          right: 160rpx !important;
        }
        .for-time{
          right: 60rpx !important;
        }
      }
    }
    .order-info{
      height: 560rpx;
      background: #FFFFFF;
      h4{
        font-weight: 400;
        font-size: 24rpx;
        color: #575757;
        text-align: center;
      }
    }
  }

}
</style>
